<template>
  <el-dialog
    top="30px"
    width="600px"
    append-to-body
    :close-on-click-modal="false"
    title="五级分类历史"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <div class="after-dashboard cursor-pointer">
      <svg viewBox="0 0 100 100">
        <path
          d="M 50 50 m 0 47 a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,94"
          class="after-dashboard__process"
          stroke="#DEDEDE"
        ></path>
        <path
          d="M 50 50 m 0 47 a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,94"
          class="after-dashboard__process"
          :stroke="afterStatus.color"
        ></path>
        <path
          d="M 50 50 m 0 47 a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,94"
          class="after-dashboard__process after-dashboard__dash"
          stroke="#FFF"
        ></path>
        <path
          d="M 50 50 m 0 40 a 40,40 0 1 1 0,-80 a 40,40 0 1 1 0,80"
          class="after-dashboard__inner"
          :style="{ strokeDasharray: `${innerProcessLength}px, 251.327px` }"
          stroke="#FFAB19"
        ></path>
        <path
          d="M 50 50 m 0 40 a 40,40 0 1 1 0,-80 a 40,40 0 1 1 0,80"
          class="after-dashboard__inner"
          :style="{ strokeDasharray: `${innerProcessPercent}px, 251.327px` }"
          stroke="#47CBC9"
        ></path>
      </svg>
      <div class="after-dashboard__text">
        <span class="font-weight-bold" :style="{ color: afterStatus.color }">
          {{ afterStatus.label }}
        </span>
        <div class="after-dashboard__hint">
          <span>当前状态</span>
        </div>
      </div>
    </div>
    <el-form @submit.native.prevent :inline="true">
      <el-form-item class="float-right">
        <el-button icon="el-icon-edit" @click="handleEdit()">更改五级分类</el-button>
      </el-form-item>
    </el-form>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <level-edit
      :visible.sync="editVisible"
      :form-data="editRow"
      :query-id="queryId"
      @success="getData()"
    ></level-edit>
  </el-dialog>
</template>

<script>
import { enumLevelClassType } from '@/credit/views/city/self/after/enum'
import LevelEdit from '@/credit/views/city/self/after/level/LevelEdit'
import { enumAfterStatus } from '@/credit/views/city/self/after/AfterProject'
export default {
  components: {
    LevelEdit,
  },
  props: {
    visible: Boolean,
    queryId: String,
  },
  data() {
    return {
      innerProcessLength: 188.496,
      loading: false,
      params: {
        index: 1,
        size: 10,
      },
      tableName: 'five_level_class',
      tableData: [],
      totalCount: 0,
      tableColumns: [
        {
          attrs: { label: '五级分类', prop: 'class_type', align: 'center' },
          process: v => enumLevelClassType[v],
        },
        { attrs: { label: '评定日期', prop: 'evaluate_date' } },
        {
          attrs: { label: '评定人', prop: 'submit_person_name', align: 'center' },
          process: v => v || '-',
        },
      ],
      editVisible: false,
      editRow: {},
      relatedId: '',
    }
  },
  computed: {
    afterStatus() {
      const data = this.tableData?.[0] ?? {}
      return enumAfterStatus[data.class_type ?? 1]
    },
    visibleKey() {
      return `${this.queryId}-${this.visible}`
    },
    levelData() {
      return this.tableData?.[0] ?? {}
    },
    innerProcessPercent() {
      return 80
    },
  },
  watch: {
    visibleKey: {
      handler: function () {
        this.params['customer_related_id.eq'] = this.queryId
        if (this.visible && this.queryId) {
          this.getData()
        } else {
          this.tableData = []
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleEdit() {
      this.editId = ''
      this.editRow = {
        class_type: this.levelData.class_type,
      }
      this.editVisible = true
    },
    getData() {
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, { create_time: 'desc' })
        .then(res => {
          this.tableData = (res?.data?.data ?? []).map(this.dataAdapter)
          this.totalCount = res?.data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(row) {
      row.submit_person_name = +row.evaluate_type === 2 ? '系统自动评定' : row.submit_person_name
      return row
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped>
.after-dashboard {
  width: 100px;
  height: 100px;
  margin-left: 2rem;
  position: relative;
}
.after-dashboard__process {
  stroke-dasharray: 221.482px, 295.31px;
  stroke-dashoffset: -36.9137px;
  stroke-linecap: round;
  stroke-width: 4;
  fill-opacity: 0;
}
.after-dashboard__dash {
  stroke-dasharray: 2px 32px;
  stroke-linecap: butt;
}
.after-dashboard__inner {
  stroke-dashoffset: -31.4159px;
  stroke-linecap: round;
  stroke-width: 1;
  fill-opacity: 0;
}
.after-dashboard__text {
  position: absolute;
  top: 58%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, -50%);
  line-height: 1;
}
.after-dashboard__hint {
  margin-top: 0.5rem;
  font-size: 80%;
  color: $gray-600;
}
.text-funds {
  font-size: 1.5rem;
}
</style>
